
<script setup>
import server from "../http/index";
import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";

const router = useRouter();

const formState = ref({
  username: "",
  password: "",
  remember: false,
});

const onFinish = debounce(async function () {
  if(!isAgreed.value){
    alert('请先阅读并同意《用户隐私协议》！')
    return
  }
  let {data:{msg,code,routerList,token}} = await server.post("login", formState.value);
 
  if (code == 200) {

    formState.value = "";
    sessionStorage.setItem("token", token);
    sessionStorage.setItem("routerList", JSON.stringify(routerList));
    router.push("/container");
  } else if (code == 201) {
    alert(msg);
    formState.value.password = "";
  } else {
    alert(msg);
    formState.value.username = "";
  }
}, 500);
const onFinishFailed = (errorInfo) => {
  alert("用户名不符合规则");
};

//防抖
function debounce(func, wait) {
  let timeoutId;
  // 返回一个包裹原函数的新函数
  return function () {
    // 清除上一次延时任务
    clearTimeout(timeoutId);
    // 设置新的延时任务，在wait毫秒后执行原函数
    timeoutId = setTimeout(() => {
      func.apply(this);
    }, wait);
  };
}

window.oncontextmenu = function () {
  return false;
};

const isAgreed = ref(false)
</script>
<template >
  <div class="admin">
    <div class="admin-body">
      <a-form
        :model="formState"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="用户名"
          name="username"
          :rules="[
            {
              required: true,
              message: '请输入正确的用户名',
              pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
            },
          ]"
        >
          <a-input v-model:value="formState.username">
            <template #prefix>
              <UserOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          label="密&nbsp;&nbsp;&nbsp;&nbsp;码"
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="formState.password">
            <template #prefix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input-password>
        </a-form-item>

        <a-form-item>
          <a-form-item name="remember" no-style>
            <a-checkbox v-model:checked="formState.remember"
              >记住密码</a-checkbox
            >
          </a-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a class="login-form-forgot" href="">忘记密码</a>
        </a-form-item>

        <a-form-item >
          &nbsp;&nbsp; &nbsp;&nbsp;  &nbsp;&nbsp;  &nbsp;&nbsp;  &nbsp;&nbsp;  &nbsp;&nbsp;
          <a-button
         
            :disabled="
              formState.username == '' || formState.password == ''
                ? true
                : false
            "
            type="primary"
            html-type="submit"
            class="login-form-button"
            
          >
            登录
          </a-button>
          &nbsp;&nbsp;  &nbsp;&nbsp;  &nbsp;&nbsp;  &nbsp;&nbsp;
          <a-button type="default">
          <a href="/register">去注册</a>
          </a-button>
        </a-form-item>

         <a-form-item class="protocol">
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <input type="checkbox" id="agree" v-model="isAgreed" />
          <label for="agree"
            >我已阅读并同意
            <a>《用户隐私协议》</a>
          </label>
        </a-form-item> 
      </a-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.admin {
  height: 100vh;
  width: 100%;
  min-height: 100%;
  background: #f0f2f5 url("/background.svg") no-repeat 50%;
  background-size: 100%;
 
  .admin-body {
    width: 360px;
    height: 360px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 30px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    #components-form-demo-normal-login .login-form {
      max-width: 300px;
    }
    #components-form-demo-normal-login .login-form-forgot {
      float: right;
    }
    #components-form-demo-normal-login .login-form-button {
      width: 100%;
    }
  }
 
}
</style>

